<script setup lang="ts">
import { initRouter } from "@/router/utils";
import { storageLocal } from "@pureadmin/utils";
import { type CSSProperties, ref, computed } from "vue";
import { useUserStoreHook } from "@/store/modules/user";
import { usePermissionStoreHook } from "@/store/modules/permission";

defineOptions({
  name: "PermissionPage"
});

const elStyle = computed((): CSSProperties => {
  return {
    width: "85vw",
    justifyContent: "start"
  };
});

const username = ref(useUserStoreHook()?.username);

const options = [
  {
    value: "admin",
    label: "管理员角色"
  },
  {
    value: "common",
    label: "普通角色"
  }
];

function onChange() {
  useUserStoreHook()
    .loginByUsername({ username: username.value, password: "admin123" })
    .then(res => {
      if (res.success) {
        storageLocal().removeItem("async-routes");
        usePermissionStoreHook().clearAllCachePage();
        initRouter();
      }
    });
}
//-----------------------------------------
// document.getElementById("loginButton").addEventListener("click", function () {
//   var username = (document.getElementById("password") as HTMLInputElement)
//     .value;
//   var password = (document.getElementById("password") as HTMLInputElement)
//     .value;

//   if (username === "" || password === "") {
//     alert("Please enter both username and password.");
//     return;
//   }

//   // 这里可以添加更多的验证逻辑，例如检查用户名和密码是否符合特定格式

//   // 模拟登录成功
//   if (username === "admin" && password === "password") {
//     alert("Login successful!");
//     // 这里可以跳转到其他页面或执行其他操作
//   } else {
//     alert("Login failed. Please check your username and password.");
//   }
// });

import { reactive } from "vue";
import { getLogin } from "@/api/rooms";

const form = reactive({
  username: "",
  password: ""
});

const submitAttempted = ref(false);

const handleSubmit = () => {
  submitAttempted.value = true;

  if (form.username && form.password) {
    // 这里可以添加实际的登录逻辑
    console.log("提交登录:", form);
    getLogin(form).then(res => {
      alert(res.msg);
      alert(res.data.token);
    });
    submitAttempted.value = false;
  }
};
</script>

<template>
  <div>
    <p class="mb-2">
      模拟后台根据不同角色返回对应路由，观察左侧菜单变化（管理员角色可查看系统管理菜单、普通角色不可查看系统管理菜单）
    </p>
    <el-card shadow="never" :style="elStyle">
      <template #header>
        <div class="card-header">
          <span>当前角色：{{ username }}</span>
        </div>
      </template>
      <el-select v-model="username" class="!w-[160px]" @change="onChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-card>
  </div>
  <div class="login-container">
    <h2>用户登录</h2>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label>用户名:</label>
        <input v-model="form.username" type="text" placeholder="请输入用户名" />
        <span v-if="submitAttempted && !form.username" class="error">
          用户名不能为空
        </span>
      </div>

      <div class="form-group">
        <label>密码:</label>
        <input
          v-model="form.password"
          type="password"
          placeholder="请输入密码"
        />
        <span v-if="submitAttempted && !form.password" class="error">
          密码不能为空
        </span>
      </div>

      <button type="submit">登录</button>
    </form>
  </div>
</template>
